// 装path依赖需要 npm init  
const { resolve } = require('path')
const path = require('path')

//使用webpack plugin 声明版权 每个js文件都会加上这一条
const webpack = require('webpack')

//index.html打包到dist文件夹
const Htmlwebpackplugin = require('html-webpack-plugin');

//压缩bundle.js
const Uglifyjsplugin =require('uglifyjs-webpack-plugin');

module.exports = {
    entry:'./src/main.js',
    output:{
        // path需要动态获取文件的路径 需要用到node语法
        // _dirname 代表当前目录，后面dist参数 代表当前目录下面的dist文件夹
        path: path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    resolve:{
        alias:{'vue$' : 'vue/dist/vue.esm.js'}
    },
    module:{
        rules:[
            {
                test:/\.vue$/,
                use:['vue-loader']
            }
        ]
    },
    plugins:[
    new webpack.BannerPlugin('这是linonplus写的'),
    
   // 配置htmlwebpackplugin
    new Htmlwebpackplugin(
        {
            //会用这个作为模版，index.html里面的内容会被保留
            template:'index.html',
        }
    ),

    new Uglifyjsplugin(),
],
    //配置本地服务器 方便开发阶段调试
    devServer:{
        contentBase:'./dist',
        inline:true,
    }
}

// 配置完webpack.config.js 之后就可以直接用webpack命令来打包